<template>
	<div class="banner">
		<!-- 隐藏菜单 -->
		<div :class="[{'default' : show}, 'slider']">
			<p>
				<router-link to="/">登录</router-link>/
				<router-link to="/">注册</router-link>
			</p>
			<form class="search">
				<i class="iconfont">&#xe662;</i>
				<input type="text" value="泰国" />
			</form>
			<ul>
				<li v-for="item in menus " :key="item.id">
					<router-link to="/">{{item.name}}</router-link>
				</li>
			</ul>
		</div>
		<!-- 主界面 -->
		<div class="main">
			<!-- 顶部 -->
			<div class="banner-top">
				<!-- 城市切换 -->
				<div class="city" @click="btn()">
					<label>
						{{cityName}}
					</label>
					<i class="iconfont">&#xe601;</i>
				</div>
				<!-- 搜索 -->
				<form class="search">
					<i class="iconfont">&#xe662;</i>
					<input type="text" placeholder="泰国" />
				</form>
				<!-- 导航按钮 -->
				<p class="slider-btn" @click="getShow()">
					<i class="iconfont">&#xe604;</i>
				</p>
			</div>

			<!-- 轮播 -->
			<div class="swiper banner-swiper">
				<ul class="swiper-wrapper">
					<li class="swiper-slide" v-for="item in imgURL" :key="item.id">
						<img :src="item.img" />
					</li>
				</ul>
				<div class="swiper-pagination banner-pagination"></div>
				<!--分页器。如果放置在swiper外面，需要自定义样式。-->
			</div>
		</div>
	</div>
</template>

<script>
	import {mapState} from 'vuex'
	//1.引入vue周期函数
	import {
		onMounted
	} from 'vue';
	//2.引入Swiper的动态组件
	import Swiper, {
		Autoplay,
		EffectCoverflow,
		EffectCube,
		Pagination,
	} from 'swiper';

	//3.说明swiper组件应用配置
	Swiper.use([Autoplay, EffectCoverflow, EffectCube, Pagination]);

	//导出
	export default {
		name: 'Banner',
		props:['propbanner'],
		data() {
			return {
				imgURL:[
					{id:1,img:('images/1.jpg')},
					{id:2,img:('images/2.jpg')},
					{id:3,img:('images/3.jpg')},
					{id:4,img:('images/4.jpg')},
					{id:5,img:('images/5.jpg')},
				],
				menus: [],
				show:false
			}
		},
		computed:{
			//接受state内部的cityName变量
			...mapState(['cityName'])
		},
		watch:{
			propbanner(){
				this.menus=this.propbanner
			}
		},
		methods:{
			getShow(){
				this.show=!this.show;
			},
			btn(){
				this.$router.push('/city')
			}
		},
		//4.设置应用swiper的位置以及具体操作
		setup() {
			onMounted(() => {
				new Swiper('.banner-swiper', {
					//循环播放
					loop: true,
					//设置分页器效果
					pagination: {
						el: '.banner-pagination'
					},
					//设置播放项：时间，不停止，手指经过不暂停自动
					autoplay: {
						deplay: 3000,
						stopOnLastSlide: false,
						disableOnInteraction: false
					}
				})
			})
		}
	}
</script>

<style scoped>
	.slider {
		position: absolute;
		left: -6.6rem;
		top: 0;
		z-index: 6;
		background-color: rgba(62, 62, 62, 0.9);
		height: 100%;
		width: 6.6rem;
		transition: all 1s;
	}
	/* 动画选择器 */
	.default{
		left: 0;
		transition: all 1s;
	}
	.slider a {
		text-decoration: none;
		color: white;
	}

	.slider p {
		line-height: 1.3rem;
		text-align: right;
		padding-right: 0.3rem;
		color: white;
		font-size: 0.35rem;
	}

	.slider .search {
		flex: 1;
		background-color: #5a5a5a;
		border-radius: 0.1rem;
		width: 90%;
		overflow: hidden;
		line-height: 0.8rem;
		margin: 0.3rem auto;
	}

	.slider .search i {
		height: 100%;
		color: white;
		display: inline-block;
		font-size: 0.45rem;
		padding-left: 0.2rem;
		margin: 0 auto;
		vertical-align: middle;
	}

	.slider .search input {
		border: none;
		width: 80%;
		background-color: #5a5a5a;
		line-height: 0.7rem;
		text-indent: 1em;
	}

	.slider ul {
		margin: 0.5rem auto 0;
		width: 95%;
	}

	.slider ul li {
		line-height: 1.3rem;
		text-align: left;
		text-indent: 1em;
		font-size: 0.3rem;
		border-top: 0.04rem solid black;
	}
	.slider ul li a{
		display: block;
	}

	.slider ul li:last-child {
		border-bottom: 0.04rem solid black;
	}

	.main {
		position: relative;
		width: 100%;
		height: 5.6rem;
	}

	/* 顶部样式 */
	.banner-top {
		position: absolute;
		left: 0;
		top: 0.3rem;
		z-index: 5;
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		height: 0.8rem;
	}

	.banner-top .city {
		color: white;
		font-size: 0.3rem;
		line-height: 0.8rem;
		padding-left: 0.3rem;
		padding-right: 0.4rem;
	}

	.banner-top .city i {
		vertical-align: middle;
		padding-left: 0.1rem;
	}

	.banner-top .search {
		flex: 1;
		background-color: white;
		border-radius: 0.1rem;
		overflow: hidden;
		line-height: 0.8rem;
	}

	.banner-top .search i {
		height: 100%;
		display: inline-block;
		font-size: 0.45rem;
		padding-left: 0.2rem;
		vertical-align: middle;
	}

	.banner-top .search input {
		border: none;
		width: 80%;
		line-height: 0.7rem;
		text-indent: 1em;
	}

	.banner-top .slider-btn {
		color: white;
		padding-left: 0.4rem;
		padding-right: 0.3rem;
		line-height: 0.8rem;
		vertical-align: middle;
	}

	/* 轮播区域的样式 */
	.banner-swiper {
		width: 100%;
		height: 5.6rem;
	}

	.banner-swiper img {
		width: 100%;
		height: 100%;
	}

	/* 穿透 */
	.swiper-pagination :deep(.swiper-pagination-bullet-active)  {
		background-color: orange;
	}
	
</style>
